<template>
<section>
  <div class="frame">
      <div class="count-icon">
        <div class="count-icon-top">
          <img src="@/assets/userTotal.png">
        </div>
        <div class="count-icon-bottom" style="background-image: linear-gradient(45deg, #2B98FF 0%, #6BC1F9 100%);">
        </div>
      </div>
      <div class="count-text">
        <div class="count-label">总用户数</div>
        <div class="count-number" style="color: #2F9BFF;">{{total}}</div>
      </div>
      <div class="clear"></div>
  </div>
    <div class="frame" style="margin-left: 32px;">
      <div class="count-icon">
        <div class="count-icon-top">
          <img src="@/assets/userAdd.png">
        </div>
        <div class="count-icon-bottom" style="background-image: linear-gradient(-135deg, #24B9FF 0%, #51F1C3 100%);">
        </div>
      </div>
      <div class="count-text">
        <div class="count-label">今日新增</div>
        <div class="count-number" style="color: #3FDBDB;">{{today}}</div>
      </div>
      <div class="clear"></div>
  </div>
      <div class="clear"></div>
    
     <div style="padding: 15px;margin-top: 39px;">用户近一个月趋势图</div>
    <div class="clear"></div>
    <div id="container_user" class="culri" style="margin-top:20px;height:400px"></div>
</section>
</template>
<script type="text/ecmascript-6">
import echarts from 'echarts';
import utils from '@/utils.js';
import { mobileUserService } from '@/services';
export default {
  data() {
    return {
      userRends: [],
      total: null,
      today: null,
    };
  },
  activated () {
    this.getUserStatics();
  },
  methods: {
    async getUserStatics () {
       const {total, today, trend } = await mobileUserService.getMobileUserStatics();
       this.total = total;
       this.today = today;
       this.userRends = trend;
       this.refreshChart();
    },
    refreshChart() {
      var dom = document.getElementById("container_user");
      var myChart = echarts.init(dom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToDate(params[0].axisValue) + "<br>用户数量:" + params[0].data[1];
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              return val;
            }
          }
        },
        series: [
          {
            name: '用户数',
            type: 'line',
            stack: '总数',
            smooth: true,
            stack: 'Total',
            axisLabel: {
              formatter: function(val) {
                return val;
              }
            },
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            // data: [[1635831402934, 0],[1636320274702, 1], [1637320374702, 100], [1638320474702, 1]]
            data: this.userRends,
          },
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
  }
}
</script>
<style>
.frame {
    padding: 16px 32px;
    background: #fff;
    flex: 1 1 100%;
    max-width: 33.33%;
    max-height: 100%;
    box-sizing: border-box;
    float: left;
}

.count-icon {
    height: 88px;
    float: left;
}


.count-icon-top {
    width: 60px;
}

.count-icon-top img {
    width: 100%;
}

.count-icon-bottom {
    width: 60px;
    margin-top: 10px;
    height: 3px;
    border-radius: 6px;
}

.count-text {
    height: 88px;
    margin-left: 24px;
    text-align: left;
    float: left;
}

.count-label {
    height: 22px;
    margin-top: 7px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #777;
}
.count-number {
    font-size: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f5a623;
}
</style>
